<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>资讯</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/dropload.css">
		<script src="../js/winResponive.js"></script>
		<style>
			/*html,
			body {
				background-color: #009be0 !important;
			}*/
		</style>
		<style>
			ul,li{list-style: none;}
			.update-wrapper{background-color: #fff;}
			.update-wrapper .update{font-size: .28rem;color: #666;margin-left: .2rem;padding-top: .25rem;margin-bottom: .2rem;}
			.update-wrapper .banner{width: 7.10rem;height: 2.70rem;display: block;margin: 0 auto;position: relative;}
			.update-wrapper .banner-img{width: 7.10rem;height: 2.70rem;display: block;margin: 0 auto;}
			.update-wrapper .over{font-size: .32rem;color: #fff;position: absolute;left: 0;bottom: 0;margin-left: .15rem;}
			.update-wrapper .title{font-size: .32rem;color: #333;margin-bottom: .25rem;line-height: .5rem;}
			.update-wrapper .bottom{display: block;margin: 0 auto;width: 6.8rem;margin-top: .3rem;}
			.update-wrapper .bottom .left{float: left;width: 3.8rem;margin-right: .2rem;}
			.update-wrapper .bottom .left span{font-size: .24rem;color: #999;margin-right: .3rem;}
			.update-wrapper .bottom .left span:last-child{margin-right:0;background-color: #0aae0f;color: #eee;width: .9rem;height: .4rem;display: inline-block;text-align: center;line-height: .4rem;}
			.update-wrapper .right{width: 2.75rem;height: 1.67rem;margin-top: .1rem;}
			.update-wrapper .leave{border-top: .01rem solid #ccc;display: block;margin: 0 auto;width: 6.8rem;margin-top: .35rem;}
			.update-wrapper .leave p{font-size: .28rem;color: #666;line-height: 0.8rem;}
			.update-wrapper .leave p span{float: right;margin-top: .2rem;}

			.blue{background-color: #009be0;}
			.blue .search-box{width: 6.3rem;height: .64rem;margin: 0 auto;position: relative;}
			.blue .search-box span{position: absolute;left: 0;top: 0;color: #fff;margin-top: .12rem;margin-left: .2rem;}
			.blue .search-box .search{background: rgba(255,255,255,0.2);color: #eee;border-radius: .5rem;text-align: center;border: none;}
			.blue .search-box .search::-webkit-input-placeholder { /* WebKit browsers */
			  color: #eee;
			}

			.toggle-wrapper{background-color: #009be0;height: .8rem;padding-top: .1rem;}
			.toggle-wrapper .wai{color: #fff;font-size: .28rem;line-height: .8rem;width: 49%;text-align: center;display: inline-block;}
			.toggle-wrapper .wai .nei{height: .65rem;display: inline-block;}
			.toggle-wrapper .wai.active .nei{font-size: .34rem;border-bottom: .05rem solid #fff;}

			.toggle-wrapper.two{background-color: #fff;height: 1rem;padding-top: 0;line-height: 1rem;}
			.toggle-wrapper.two .wai{width: 24%;color: #aaa;}
			.toggle-wrapper.two .wai .nei{height: .8rem;}
			.toggle-wrapper.two .wai.active .nei{color: #009be0;border-bottom: .05rem solid #009be0;}

			.update-wrapper.two{padding-bottom: .1rem;}
			.update-wrapper.two .bottom{margin-top: 0;padding-top: .2rem;}
			.update-wrapper.two .leave{margin-top: 0;}
			.update-wrapper.two .bottom .left span:last-child{background-color: #ff9d29;}

			.icon{border-radius: 50%;position: fixed;right: .34rem;bottom: 2.9rem;width: .8rem;height: .8rem;opacity: 0.8;z-index: 999;}

			.xuetang-list .update{font-size: .32rem;color: #666;}
		</style>
		<style>
			.yixue-box{background-color: #fff;}
			.yixue-box .right{width: .8rem;height: .8rem;border-radius: 50%;display: block;}
		</style>
		<style>
			.meiri-wrapper{background-color: #fff;}
			.meiri-wrapper p{font-size: .32rem;color: #666;}
			.meiri-wrapper .all{float: right;color: #0367fd;font-size: .28rem;}
			.meiri-wrapper .leave{border-bottom: .01rem solid #ccc;display: block;margin: 0 auto;width: 6.8rem;padding-top: .35rem;}
		</style>
		<style>
			.meiri-list.mui-grid-view .mui-table-view-cell .meiri-box{border: .01rem solid #ccc;border-radius: .1rem;}
			.meiri-list.mui-grid-view .mui-media-object{width: 3.45rem;height: 2.08rem;}
			.meiri-list.mui-grid-view .double{position: relative;}
			.meiri-list.mui-grid-view .over{width: .8rem;height: .8rem;position: absolute;left: 1.55rem;top: .8rem;border-radius: 50%;opacity: 0.8;}
			.meiri-list.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{line-height: 18px;height: 40px;text-align: left;padding: 0 8px;}
			.mui-table-view:before{height: 0;}
		</style>
		<style>
		    .tab{
		        display: -webkit-box;
		        display: -webkit-flex;
		        display: -ms-flexbox;
		        display: flex;
		        height: 44px;
		        line-height: 44px;
		        /*border-bottom: 1px solid #ccc;*/
		        background-color: #eee;
		        position: relative;
		    }
		    .tab:after{
		    	content: '';
		    	display: block;
		    	width: 90%;
		    	border-bottom: .01rem solid #ccc;
		    	position: absolute;
		    	bottom: 0;
		    	margin: 0 15px;
		    }
		    .tab .item{
		        display: block;
		        -webkit-box-flex: 1;
		        -webkit-flex: 1;
		        -ms-flex: 1;
		        flex: 1;
		        width: 100%;
		        font-size: .28rem;
		        text-align: center;
		        color: #aaa;
		        text-decoration: none;
		        position: relative;
		    }
		    .tab .cur:after{
		    	content: '';
		    	display: block;
		    	width: .8rem;
		    	border-bottom: .05rem solid #009be0;
		    	position: absolute;
		    	left: .5rem;
		    	bottom: -.1rem;
		    }
		    .tab .cur{
		        height: 42px;
		        /*border-bottom: 2px solid #009be0;*/
		        color: #009be0;
		        font-size: .34rem;
		    }
		    .content{
		        background-color: #fff;
		    }
		    .content .item{
		        display: -webkit-box;
		        display: -webkit-flex;
		        display: -ms-flexbox;
		        display: flex;
		        -ms-flex-align:center;
		        -webkit-box-align:center;
		        box-align:center;
		        -webkit-align-items:center;
		        align-items:center;
		        padding:3.125%;
		        border-bottom: 1px solid #ddd;
		        color: #333;
		        text-decoration: none;
		    }
		    .content .item img{
		        display: block;
		        width: 40px;
		        height: 40px;
		        border:1px solid #ddd;
		    }
		    .content .item h3{
		        display: block;
		        -webkit-box-flex: 1;
		        -webkit-flex: 1;
		        -ms-flex: 1;
		        flex: 1;
		        width: 100%;
		        max-height: 40px;
		        overflow: hidden;
		        line-height: 20px;
		        margin: 0 10px;
		        font-size: 1.2rem;
		    }
		    .content .item .date{
		        display: block;
		        height: 20px;
		        line-height: 20px;
		        color: #999;
		    }
		    .opacity{
		        -webkit-animation: opacity 0.3s linear;
		        animation: opacity 0.3s linear;
		    }
		    @-webkit-keyframes opacity {
		        0% {
		            opacity:0;
		        }
		        100% {
		            opacity:1;
		        }
		    }
		    @keyframes opacity {
		        0% {
		            opacity:0;
		        }
		        100% {
		            opacity:1;
		        }
		    }
    	</style>
	</head>

	<body>
		
		<div class="mui-content">

			<div><img class="icon" src="../images/icon1.jpg" alt=""></div>

			<div class="blue">
				<div class="search-box">
					<span class="mui-icon mui-icon-search"></span>
					<input type="text" class="search" placeholder="搜索资讯、内容或者项目">
				</div>
	        </div>
	        <div class="toggle-wrapper">
	        	<span class="wai active"><span class="nei zixun">资讯</span></span>
	        	<span class="wai wai2"><span class="nei xuetang">学堂</span></span>
	        </div>






	        <div class="zixun-list">
		        <div class="update-wrapper">
		        	<h5 class="update">今日更新</h5>
		        	<div class="banner">
		        		<p class="over" id="a1">女性20岁开始，各年龄段都该看的癌症筛...</p>
		        		<img class="banner-img" id="a2" src="../images/img1.jpg" alt="">
		        	</div>
		        	<div class="bottom">
		        		<div class="left">
		        			<h5 class="title" id="a3">女性20岁开始，各年龄段都该看的癌症筛查清单</h5>
		        			<div>
		        				<span id="a4">丁香医生</span>
		        				<span id="a5">5月17日</span>
		        				<span>健康</span>
		        			</div>
		        		</div>
		        		<img class="right" id="a6" src="../images/img2.jpg" alt="">
		        	</div>
		        	<div style="clear: both;"></div>
		        	<div class="leave">
						<p>余下1篇文章<span class="mui-icon mui-icon-arrowdown"></span></p>
		        	</div>
		        </div>

		        <div style="height: .2rem;"></div>

				<div>
					<div class="tab toggle-wrapper two">
					    <a href="javascript:;" class="item cur">医疗</a>
					    <a href="javascript:;" class="item">医美</a>
					    <a href="javascript:;" class="item">保险</a>
					    <a href="javascript:;" class="item">健康</a>
					</div>
					<div class="content update-wrapper two">
					    <div class="lists bottom"></div>
					    <div class="lists bottom"></div>
					    <div class="lists bottom"></div>
					    <div class="lists bottom"></div>
					</div>
				</div>

	        </div>

	        <div class="xuetang-list" style="display: none;">
	        	<div style="background-color: #fff;padding: .2rem;margin-bottom: -.2rem;">
		        	<div id="slider" class="mui-slider">
					  <div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
						  <a href="#">
							<img id="b1"  class="right" src="../images/img1.jpg" alt="">
						  </a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
						  <a href="#">
							<img id="b2"  class="right" src="../images/img1.jpg" alt="">
						  </a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
						  <a href="#">
							<img id="b3"  class="right" src="../images/img1.jpg" alt="">
						  </a>
						</div>
						<!-- 第三张 -->
						<div class="mui-slider-item">
						  <a href="#">
							<img id="b4"  class="right" src="../images/img1.jpg" alt="">
						  </a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
						  <a href="#">
							<img  id="b5" class="right" src="../images/img1.jpg" alt="">
						  </a>
						</div>
					  </div>
					  <div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					  </div>
					</div>
				</div>
		        <div class="update-wrapper">
		        	<h5 class="update">医学百科</h5>
		        	<div class="leave"></div>
		        </div>
				
				<div class="yixue-box">
			        <div id="slider" class="mui-slider">
						<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="height: 1.5rem;margin-top: .2rem;">
							<div class="mui-scroll">
								<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
									<img class="right" src="../images/yixue1.jpg" alt="">疫苗
								</a>
								<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
									<img class="right" src="../images/yixue2.jpg" alt="">医学
								</a>
								<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
									<img class="right" src="../images/yixue3.jpg" alt="">面部
								</a>
								<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
									<img class="right" src="../images/yixue4.jpg" alt="">体验
								</a>
								<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
									<img class="right" src="../images/yixue5.jpg" alt="">更多
								</a>
							</div>
						</div>
					</div>
				</div>

				<div style="height: .2rem;"></div>
				
				<div class="meiri-wrapper">
					<div class="leave">
						<p>每日课程<span class="all">全部 >></span></p>
		        	</div>
	        	</div>

	        	<div class="xuetang-content">
					<ul class="mui-table-view mui-grid-view meiri-list xuetang-lists">
				        <!-- <li class="mui-table-view-cell mui-media mui-col-xs-6 double">
				        	<div class="meiri-box">
					            <a href="#">
					            	<img class="over" src="../images/meiri2.jpg" alt="">
					                <img class="mui-media-object" src="../images/meiri1.jpg">
					                <div class="mui-media-body">健康投资健康投资健康投 资健康投资...</div>
					            </a>
				            </div>
				        </li> -->
				    </ul>
			    </div>
			    
	        </div>
	    </div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/zepto.js"></script>
		<script src="../js/dropload.js"></script>
		<script>
			$('.wai').click(function(){
				$(this).addClass('active').siblings().removeClass('active')//样式切换
			})
			$('.wai2').click(function(){
				//清数据
				$('.xuetang-content').html(`<ul class="mui-table-view mui-grid-view meiri-list xuetang-lists"></ul>`);
				//分页ajax
				$(function(){
				    // 页数
				    var page = 0;
				    // 每页展示5个
				    var size = 2;

				    // dropload
				    $('.xuetang-content').dropload({
				        scrollArea : window,
				        loadDownFn : function(me){
				            page++;
				            // 拼接HTML
				            var result = '';
				            $.ajax({
				            	data:{act:'list',page:page,size:size},
				                type: 'post',
				                url: 'http://yg1900069.pro.wdcase.com/zxxt/xuetang_api.php',
				                dataType: 'json',
				                success: function(data){
				                    if(data.data!=null){
				                        data.data.forEach(function(item,i){
											result+=`
												<li class="mui-table-view-cell mui-media mui-col-xs-6 double">
										        	<div class="meiri-box">
											            <a href="#">
											            	<img class="over" src="../images/meiri2.jpg" alt="">
											                <img class="mui-media-object" src="${item.imgurl}">
											                <div class="mui-media-body">${item.subname}</div>
											            </a>
										            </div>
										        </li>
											`
										})
				                    // 如果没有数据
				                    }
				                    else{// 锁定
				                        me.lock();
				                        // 无数据
				                        me.noData();
				                    }
				                    // 为了测试，延迟1秒加载
				                    setTimeout(function(){
				                        // 插入数据到页面，放到最后面
				                        $('.xuetang-lists').append(result);
				                        // 每次数据插入，必须重置
				                        me.resetload();
				                    },1000);
				                },
				                error: function(xhr, type){
				                    alert('Ajax error!');
				                    // 即使加载出错，也得重置
				                    me.resetload();
				                }
				            });
				        }
				    });
				});
			})
			
			$('.zixun').click(function(){
				$('.zixun-list').show()
				$('.xuetang-list').hide()
			})
			$('.xuetang').click(function(){
				$('.zixun-list').hide()
				$('.xuetang-list').show()
			})


			$(function(){
			    var itemIndex = 0;
			    var tab1LoadEnd = false;
			    var tab2LoadEnd = false;
			    var tab3LoadEnd = false;
			    var tab4LoadEnd = false;
			    // tab
			    $('.tab .item').on('click',function(){
			        var $this = $(this);
			        itemIndex = $this.index();
			        $this.addClass('cur').siblings('.item').removeClass('cur');
			        $('.lists').eq(itemIndex).show().siblings('.lists').hide();

			        // 如果选中菜单一
			        if(itemIndex == '0'){
			            // 如果数据没有加载完
			            if(!tab1LoadEnd){
			                // 解锁
			                dropload.unlock();
			                dropload.noData(false);
			            }else{
			                // 锁定
			                dropload.lock('down');
			                dropload.noData();
			            }
			        }
			        // 如果选中菜单二
			        else if(itemIndex == '1'){
			            if(!tab2LoadEnd){
			                // 解锁
			                dropload.unlock();
			                dropload.noData(false);
			            }else{
			                // 锁定
			                dropload.lock('down');
			                dropload.noData();
			            }
			        }
			        else if(itemIndex == '2'){
			            if(!tab3LoadEnd){
			                // 解锁
			                dropload.unlock();
			                dropload.noData(false);
			            }else{
			                // 锁定
			                dropload.lock('down');
			                dropload.noData();
			            }
			        }
			        else if(itemIndex == '3'){
			            if(!tab4LoadEnd){
			                // 解锁
			                dropload.unlock();
			                dropload.noData(false);
			            }else{
			                // 锁定
			                dropload.lock('down');
			                dropload.noData();
			            }
			        }

			        // 重置
			        dropload.resetload();
			    });

			    var page0=0
			    var page1=0
			    var page2=0
			    var page3=0
			    var size=2
			    function zixunQuery(me,page,size,cate){
			    	$.ajax({
		            	data:{act:'list2',page:page,size:size,cate:cate},
		                type: 'post',
		                url: 'http://yg1900069.pro.wdcase.com/zxxt/zixun_api.php',
		                dataType: 'json',
		                success: function(data){
		                	var result = '';
		                    if(data.data!=null){
		                        data.data.forEach(function(item,i){
		                        	if(item.category=='0'){item.category='医疗'}
		                        	if(item.category=='1'){item.category='医美'}
		                        	if(item.category=='2'){item.category='保险'}
		                        	if(item.category=='3'){item.category='健康'}
									result+=`
										<div>
							        		<div class="left">
							        			<h5 class="title">${item.title}</h5>
							        			<div>
							        				<span>${item.author}</span>
							        				<span>${item.addtime}</span>
							        				<span>${item.category}</span>
							        			</div>
							        		</div>
							        		<img class="right" src="${item.imgurl}" alt="">
						        		</div>
									`
								})
		                    // 如果没有数据
		                    }
		                    else{
		                        // 数据加载完
                                // tab1LoadEnd = true;
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
		                    }
		                    // 为了测试，延迟1秒加载
		                    setTimeout(function(){
		                        // 插入数据到页面，放到最后面
		                        $('.lists').eq(cate).append(result);
		                        // 每次数据插入，必须重置
		                        me.resetload();
		                    },1000);
		                },
		                error: function(xhr, type){
		                    alert('Ajax error!');
		                    // 即使加载出错，也得重置
		                    me.resetload();
		                }
		            });
			    }
			    // dropload
			    var dropload = $('.content').dropload({
			        scrollArea : window,
			        loadDownFn : function(me){
			            if(itemIndex == '0'){
			            	page0++;
				            zixunQuery(me,page0,size,itemIndex)
			            }
			            if(itemIndex == '1'){
			            	page1++;
	                        zixunQuery(me,page1,size,itemIndex)
			            }
			            if(itemIndex == '2'){
			            	page2++;
	                        zixunQuery(me,page2,size,itemIndex)
			            }
			            if(itemIndex == '3'){
			            	page3++;
	                        zixunQuery(me,page3,size,itemIndex)
			            }
			        }
			    });
			});

		</script>
		<style>
			
		</style>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				mui.ajax('http://yg1900069.pro.wdcase.com/zxxt/zixun_api.php',{
					data:{act:'list'},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						// console.log(JSON.stringify(data))
						mui('#a1')[0].innerText=data.data[0].title
						mui('#a2')[0].src=data.data[0].imgurl

						mui('#a3')[0].innerText=data.data[1].title
						mui('#a4')[0].innerText=data.data[1].author
						mui('#a5')[0].innerText=data.data[1].addtime
						mui('#a6')[0].src=data.data[1].imgurl
					},
					error:function(xhr,type,errorThrown){
					}
				});

				mui.ajax('http://yg1900069.pro.wdcase.com/zxxt/xuetang_api.php',{
					data:{act:'bannerList'},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						// console.log(JSON.stringify(data))
						mui('#b1')[0].src=data.data[2].imgurl
						mui('#b2')[0].src=data.data[0].imgurl
						mui('#b3')[0].src=data.data[1].imgurl
						mui('#b4')[0].src=data.data[2].imgurl
						mui('#b5')[0].src=data.data[0].imgurl
					},
					error:function(xhr,type,errorThrown){
					}
				});
			})
		</script>
	</body>

</html>